﻿@{
    ViewBag.Title = "CustomBinding";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<ol class="breadcrumb">
    <li><a href="/Home/Home">Home</a></li>
    <li><a href="/KnockoutJs/Introduction">KnockOut JS</a></li>
    <li class="active">Custom Binding</li>
</ol>

<div id="introduction">
    <h1 class="text-left">Custom bindings</h1>
</div>
<div class="bottomspace" id="createcustombinding">
    <h3>Creating custom bindings</h3>
    <p>
        You’re not limited to using the built-in bindings like click, value, and so on — you can create your own
        ones. This is how to control how observables interact with DOM elements, and gives you a lot of flexibility
        to encapsulate sophisticated behaviors in an easy-to-reuse way.
    </p>
    <p>
        For example, you can create interactive components like grids, tabsets, and so on, in the form of custom
        bindings (see the grid example).
    </p>
    <h4>Registering your binding</h4>
    <p>To register a binding, add it as a subproperty of ko.bindingHandlers:</p>
    <div class="divcolor">
        <pre><code>ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
// This will be called once when the binding is first applied to an element,
// and again whenever the associated observable changes value.
// Update the DOM element based on the supplied values here.
}
};</code></pre>
    </div>
    <p>… and then you can use it on any number of DOM elements:</p>
    <div class="divcolor">
        <pre><code>&lt;div data-bind="yourBindingName: someValue"&gt; &lt;/div&gt;</code></pre>
    </div>
    <p>
        you don’t actually have to provide both init and update callbacks — you can just provide one or the
        other if that’s all you need.
    </p>
    <h3>The "update" callback</h3>
    <p>
        Whenever the associated observable changes, KO will call your update callback, passing the following
        parameters:
    </p>
    <ul>
        <li><p>element — The DOM element involved in this binding</p></li>
        <li>
            <p>
                valueAccessor — A JavaScript function that you can call to get the current model property that is
                involved in this binding. Call this without passing any parameters (i.e., call valueAccessor()) to
                get the current model property value.
            </p>
        </li>
        <li>
            <p>
                allBindingsAccessor — A JavaScript function that you can call to get all the model properties
                bound to this DOM element. Like valueAccessor, call it without any parameters to get the current
                bound model properties.
            </p>
        </li>
        <li>
            <p>
                viewModel — The view model object that was passed to ko.applyBindings. Inside a nested binding
                context, this parameter will be set to the current data item (e.g., inside a with:
                person binding,viewModel will be set to person).
            </p>
        </li>
    </ul>
    <p>
        For example, you might have been controlling an element’s visibility using the visible binding, but now you
        want to go a step further and animate the transition. You want elements to slide into and out of existence
        according to the value of an observable. You can do this by writing a custom binding that calls
        jQuery’sslideUp/slideDown functions:
    </p>
    <a href="#">Live Demo</a>
    <h3>The "Init" callback</h3>
    <p>
        Knockout will call your init function once for each DOM element that you use the binding on. There are two
        main uses for init:
    </p>
    <ul>
        <li><p>To set any initial state for the DOM element</p></li>
        <li>
            <p>
                To register any event handlers so that, for example, when the user clicks on or modifies the DOM
                element, you can change the state of the associated observable
            </p>
        </li>
    </ul>
    <p>
        KO will pass exactly the same set of parameters that it passes to the update callback.
        Continuing the previous example, you might want slideVisible to set the element to be instantly visible or
        invisible when the page first appears (without any animated slide), so that the animation only runs when
        the user changes the model state. You could do that as follows:
    </p>
    <a href="#">Live Demo</a>
    <h3>Modifying observables after DOM events</h3>
    <p>
        You’ve already seen how to use update so that, when an observable changes, you can update an
        associated DOM element. But what about events in the other direction? When the user performs some
        action on a DOM element, you might want to update an associated observable
    </p>
    <p>
        You can use the init callback as a place to register an event handler that will cause changes to the
        associated observable. For example,
    </p>
    <a href="#">Live Demo</a>
    <h3>Creating custom bindings that control descendant bindings</h3>
    <p>
        bindings only affect the element to which they are applied. But what if you want to affect all
        descendant elements too? This is possible. Your binding can tell Knockout not to bind descendants at all,
        and then your custom binding can do whatever it likes to bind them in a different way.
        To do this, simply return { controlsDescendantBindings: true } from your binding’s init function.
    </p>
    <h4>Controlling whether or not descendant bindings are applied</h4>
    <p>
        For a very simple example, here’s a custom binding called allowBindings that allows descendant bindings
        to be applied only if its value is true. If the value is false, then allowBindings tells Knockout that it is
        responsible for descendant bindings so they won’t be bound as usual.
    </p>
    <h4>Supplying additional values to descendant bindings</h4>
    <p>
        Normally, bindings that use controlsDescendantBindings will also call
        ko.applyBindingsToDescendants(someBindingContext, element) to apply the descendant bindings against
        some modified binding context. For example, you could have a binding called withProperties that attaches
        some extra properties to the binding context that will then be available to all descendant bindings:
    </p>
    <p>
        As you can see, binding contexts have an extend function that produces a clone with extra properties.
        This doesn’t affect the original binding context, so there is no danger of affecting sibling-level elements - it
        will only affect descendants.
        Here’s an example of using the above custom binding:
    </p>
    <h3>Adding extra levels in the binding context hierarchy</h3>
    <p>
        Bindings such as with and foreach create extra levels in the binding context hierarchy. This means that
        their descendants can access data at outer levels by using $parent, $parents, $root,
        or $parentContext.
    </p>
    <p>
        If you want to do this in custom bindings, then instead of using bindingContext.extend(),
        usebindingContext.createChildContext(someData). This returns a new binding context whose viewmodel
        issomeData and whose $parentContext is bindingContext. If you want, you can then extend the child
        context with extra properties using ko.utils.extend. For example,
    </p>
    <a href="#">Demo</a>
    <h4>Creating custom bindings that support virtual elements</h4>
    <p>
        Knockout’s control flow bindings (e.g., if and foreach) can be applied not only to regular DOM elements,
        but also to “virtual” DOM elements defined by a special comment-based syntax. For example:
    </p>

</div>
